<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcss.com/font-awesome/5.12.1/css/all.css" rel="stylesheet">
    <link rel="stylesheet" href="./css/style.css">
    <title>Document</title>
</head>
<body>
    <div class="warpper">
        <div class="profile-card">
            <div class="content">
                <nav id="nav-menu">
                    <a href="#" data-rel="about-me-section" class="active">个人经历</a>
                    <a href="#" data-rel="work-exp-section">划水经历</a>
                    <div class="indicator"></div>
                </nav>
                <section class="about-me-section active-section">
                    <div class="personal-info">
                        <div class="title">
                            <h1>南小府</h1>
                            <p>十级划水大师/深资老咸鱼代表</p>
                        </div>
                        <button class="follow-btn">
                            <i class="fas fa-plus"></i> 关注
                        </button>
                    </div>
                    <div class="about-me">
                        <p>
                            干啥啥不行，吃饭第一名，贫困大赛形象代言人，野区刷微信步数榜单第一名。宇宙一级潜在鸽王，铁打的身体，磁铁打的床。懒癌协会兼临时抱佛脚协会会长，夕阳红老年退役ADC，国家一级退堂鼓选手，撒一把米在键盘上，鸡的走位都比我好，国家一级抬杠运动员，一米五的小可爱
                        </p>
                    </div>
                    <footer>
                        <ul>
                            <li><a href="#"><i class="fab fa-weixin"></i></a></li>
                            <li><a href="#"><i class="fab fa-github"></i></a></li>
                            <li><a href="#"><i class="fab fa-weibo"></i></a></li>
                            <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                        </ul>
                    </footer>
                </section>

                <section class="work-exp-section">
                    <div class="work-exps">
                        <div class="work-exp-item">
                            <div class="position">前端工程师</div>
                            <div class="seperator"></div>
                            <div class="workinfo">
                                <div class="time"> 2018.07 ~ 2019.08 <i class="far fa-calendar"></i></div>
                                <div class="comnpany">北京某某互联网金融公司</div>
                            </div>
                        </div>
                        <div class="work-exp-item">
                            <div class="position">前端工程师</div>
                            <div class="seperator"></div>
                            <div class="workinfo">
                                <div class="time"> 2018.07 ~ 2019.08 <i class="far fa-calendar"></i></div>
                                <div class="comnpany">北京某某互联网金融公司</div>
                            </div>
                        </div>
                        <div class="work-exp-item">
                            <div class="position">前端工程师</div>
                            <div class="seperator"></div>
                            <div class="workinfo">
                                <div class="time"> 2018.07 ~ 2019.08 <i class="far fa-calendar"></i></div>
                                <div class="comnpany">北京某某互联网金融公司</div>
                            </div>
                        </div>
                    </div>
                </section>
            </div>
            <aside class="profile-imag">
                <img src="me.jpg" alt="">
            </aside>
        </div>
    </div>
</body>
</html>